<template>
  <div class="form-btns">
    <div v-for="(items,indexs) in Object.values(components)" :key="indexs" class="form-btn">
      <p>{{items.title}}</p>
      <draggable :list="items.components" v-bind="{
							group: {
								name: 'form',
								pull: 'clone',
								put: false,
							},
							sort: false,
							ghostClass: 'ghostClass',
						}" :move="onMove" class="draggable-container">
        <a-button :icon="item.icon" v-for="(item, index) in items.components" :key="index">
          {{ item.name }}
        </a-button>
      </draggable>
      <a-divider class="mgt-10 mgb-10" v-if="indexs < Object.keys(components).length - 1" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'leftForm',
  props:{
      components:{
          type:Object,
          default:() => {
              return {}
          }
      }
  },
  methods: {
    // 控制是否可以被拖拽
    onMove() {
      return true
    }
  }
}
</script>
<style lang="less" scoped>
.form-btns {
  .form-btn {
    p {
      margin-top: 10px;
      font-size: 14px;
      text-align: left;
      font-weight: bold;
      height: 33px;
      line-height: 33px;
    }
    .draggable-container {
      cursor: move;
      display: grid;
      margin-right: 10px;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 33px;
      gap: 10px;
    }
    .ghostClass {
      border: 1px solid #409eff !important;
    }
  }
}
</style>